<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画</title>
  <!-- 动画比过渡的优点在于,可以不需要手动操作就能实现自动播放和循环播放 过程可控 运动完之后停留在结束状态 -->
  <!-- 动画的使用分为两步:
  1.定义动画 动画名字可以自定义，理解成取类名
  2.使用动画 -->
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: #eee8aa;
      margin: 100px auto;
      /* 使用动画 */
      /* 属性名： 动画名(必写) 运动时间(必写) 速度曲线 延迟时间 运动次数(infinite是无限的意思) 运动方向 执行完毕时的状态  */
      /* 速度曲线：linear（匀速线性运动） ease-in-out(开始和结束慢) */
      /* 运动方向：alternate 逆向播放 回来的那一次也算一次次数 */
      /* 结束状态：forward(停留在结束状态) 默认停留在起始状态 */
      animation: yundong 3s  2 linear forwards alternate;    
    }
    .box:hover{
      animation-play-state: paused;
    }
    /* 定义动画 */
    @keyframes yundong{
      form{
      }
     to{
      transform: translateX(600px) rotatey(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>简单动画</h2>
  </div>
</body>
</html>

<!-- 
https://blog.csdn.net/A_Common_Man/article/details/123420609
 -->